<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>Dojo Toolkit - Background Iframe test</title>

	<script type="text/javascript" src="boilerplate.js"></script>

	<script type="text/javascript">
		require([
			"dojo/parser",
			"dijit/Dialog",
			"dijit/DropDownMenu",
			"dijit/MenuItem",
			"dijit/form/DateTextBox",
			"dijit/form/Button",
			"dijit/Tooltip",
			"dojo/domReady!"
		], function(parser){
			parser.parse();
		});
	</script>

</head>
<body class="claro">
	<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one_pdf"]'>
		This is one tooltip.
	</span>
	<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["two_pdf"]'>
		This is another tooltip.  A little longer...
	</span>
	<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["one_flash"]'>
		This is one tooltip.
	</span>
	<span data-dojo-type="dijit/Tooltip" data-dojo-props='connectId:["two_flash"]'>
		This is another tooltip.  A little longer...
	</span>
	<button id="showDialog" data-dojo-type="dijit/form/Button">
		Show Dialog
		<script type="dojo/connect" data-dojo-event="onClick">
			dialog.show();
		</script>
	</button>
	<table>
			<tr>
				<td></td>
				<td>
					<input id="dateText_pdf" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text" '/>
					<button id="menuButton_pdf" title="edit title" value="Edit" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'>
						<span>Edit<b>!</b></span>
						<span id="menu_pdf" data-dojo-type="dijit/DropDownMenu" >
							<span id="cut_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
								onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
							<span id="copy_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
								onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
							<span id="paste_pdf" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
								onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
						</span>
					</button>
				</td>
			</tr>
			<tr>
				<td>
					<div style="width: 200px;">
						This &lt;select&gt; will disappear on IE6
						when the dialog is displayed.
						But the dialog's iframe shouldn't make it disappear because they shouldn't overlap.
					</div>
					<select id="dropDown_pdf">
						<option>cat</option>
						<option>dog</option>
						<option>mouse</option>
					</select>
					<br><br>

					<div id="one_pdf">Mouse over this to see the tooltip</div>
					<br>
					<div id="two_pdf">Mouse over this to see a different tooltip</div>
				</td>
				<td id="pdf_td">
					<embed id="pdf" src="resources/helloWorld.pdf" width="500" height="375">
				</td>
			</tr>
	</table>
	<table>
			<tr>
				<td></td>
				<td>
					<input id="dateText_flash" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text" '/>
					<button id="menuButton_flash" title="edit title" value="Edit" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"noteIcon"'>
						<span>Edit<b>!</b></span>
						<span id="menu_flash" data-dojo-type="dijit/DropDownMenu" >
							<span id="cut_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut",
								onClick:function(){ console.log("not actually cutting anything, just a test!"); }'>Cut</span>
							<span id="copy_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCopy",
								onClick:function(){ console.log("not actually copying anything, just a test!"); }'>Copy</span>
							<span id="paste_flash" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconPaste",
								onClick:function(){ console.log("not actually pasting anything, just a test!"); }'>Paste</span>
						</span>
					</button>
				</td>
			</tr>
			<tr>
				<td>
					<div style="width: 200px;">
						This select will disappear on IE6
						when the dialog is displayed.
						But the dialog's iframe shouldn't make it disappear because they shouldn't overlap.
					</div>
					<select id="dropDown_flash">
						<option>cat</option>
						<option>dog</option>
						<option>mouse</option>
					</select>
					<br><br>

					<div id="one_flash">Mouse over this to see the tooltip</div>
					<br>
					<div id="two_flash">Mouse over this to see a different tooltip</div>
				</td>
				<td>
					<embed id="flash" src="../../dojox/av/resources/video.swf" width="400" height="300" />
				</td>
			</tr>
	</table>
	<div id="dialog" data-dojo-id="dialog" data-dojo-type="dijit/Dialog">
		Hello!
	</div>
</body>
</html>
